<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>箭头函数实践</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: #58a;
    }
  </style>
</head>

<body>
  <div id="ad"></div>

  <script>
    // 需求-1 点击 div 2s 后颜色变成粉色

    let ad = document.getElementById("ad");
    // ad.onclick = function () {
    //   setTimeout(() => {
    //     // 此时 this 指向 ad
    //     this.style.background = 'pink'
    //   }, 2000)
    // }

    ad.onclick = function () {
      setTimeout(function () {
        // 报错  此时 this 指向 window
        this.style.background = 'pink'
      }, 2000)
    }

    // 需求-2 从数组中返回偶数的元素
    const arr = [1, 6, 9, 10, 100, 25];
    /* const result = arr.filter(function (item) {
      if (item % 2 === 0) {
        return true;
      } else {
        return false;
      }
    }) */
    const result = arr.filter(item => item % 2 === 0)
    console.log(result)

    // 箭头函数适合与 this 无关的回调、定时器、数组的方法的回调
    // 箭头函数不适合与 this 有关的回调、事件回调、对象的方法
    const obj = {
      name: '尚硅谷',
      getName: function () {
        // this 指向 obj
        console.log(this)
      },
      getThis: () => {
        // this 指向 window
        console.log(this)
      }
    }

  </script>
</body>

</html>